<template>
  <div class="bj">
    <div class="rem">rem 375 px</div>
    <div class="rem">使用flex布局实现</div>
    <van-tabs v-model="active">
      <van-tab title="精选"></van-tab>
      <van-tab title="水果"></van-tab>
      <van-tab title="海鲜"></van-tab>
      <van-tab title="肉禽蛋1"></van-tab>
    </van-tabs>
    <div class="bj_list">
      <div v-for="(item,index) in list" :key="index" class="bj_list_item">
        <div class="bj_list_item_content">{{item.name}}</div>
        <div class="bj_list_item_content">{{item.price}}</div>
      </div>
    </div>
    <!-- 使用float布局实现 -->
    <!-- <div class="rem">使用float布局实现</div>
    <div class="bj_list_float clearfix">
      <div v-for="(item,index) in list" :key="index" class="bj_list_float_item">
        <div class="bj_list_float_item_content">{{item.name}}</div>
      </div>
    </div>-->
  </div>
</template>
<script>
export default {
  name: "BJ",
  data() {
    return {
      active: "0",
      list: [
        {
          name: "水果1",
          price: "12",
        },
        {
          name: "水果2",
          price: "12",
        },
        {
          name: "水果3",
          price: "12",
        },
        {
          name: "水果4",
          price: "12",
        },
        {
          name: "水果",
        },
        {
          name: "水果",
        },
      ],
      litt: [
        {
          name: "海鲜1",
          price: "12",
        },
        {
          name: "海鲜2",
          price: "12",
        },
        {
          name: "水果3",
          price: "12",
        },
        {
          name: "水果4",
          price: "12",
        },
        {
          name: "水果",
        },
        {
          name: "水果",
        },
      ],
    };
  },
  watch: {
    active: {
      handler: function (cur, old) {
        if (cur === 0) {
          this.list = [
            {
              name: "精选1",
              price: "12",
            },
            {
              name: "精选1",
              price: "12",
            },
            {
              name: "精选1",
              price: "12",
            },
          ];
        } else if (cur === 1) {
          this.list = [
            {
              name: "水果",
              price: "12",
            },
            {
              name: "水果",
              price: "12",
            },
            {
              name: "水果",
              price: "12",
            },
          ];
        }
      },
    },
  },
};
</script>
<style lang="scss">
.bj {
  .rem {
    width: 375px;
    background-color: red;
  }
  background-color: #fff;
  min-height: 100vh;
  &_list {
    display: flex;
    flex-wrap: wrap;
    padding: 0 15px;
    &_item {
      width: 171.5px;
      height: 200px;
      box-sizing: border-box;
      background-color: #eee;
      margin-bottom: 2px;
    }
    &_item:nth-child(odd) {
      margin-right: 2px;
    }
  }

  &_list_float {
    padding: 0 15px;
    &_item {
      float: left;
      width: 171.5px;
      height: 200px;
      box-sizing: border-box;
      background-color: #eee;
      margin-bottom: 2px;
    }
    &_item:nth-child(odd) {
      margin-right: 2px;
    }
  }

  .clearfix:after {
    /*伪元素是行内元素 正常浏览器清除浮动方法*/
    content: "";
    display: block;
    height: 0;
    clear: both;
    visibility: hidden;
  }
}
</style>